<script setup>
import {reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
// 默认头像，使用绝对路径
const defaultAvatar = new URL('@/assets/img/dfdnv.png', import.meta.url).href
// 模拟学校数据
const schoolData = [
  {
    id: 1,
    label: '温岭市教育局',
    children: [
      {
        id: 2,
        label: '学校名称',
        children: [
          {
            id: 3,
            label: '教职工组织',
            children: [
              {
                id: 1,
                label: '校长室'
              },
              {
                id: 2,
                label: '校长室'
              },
              {
                id: 3,
                label: '校长室'
              },
              {
                id: 4,
                label: '校长室'
              }
            ]
          }
        ]
      },
    ]
  }
]

// 当前选中的树节点
const currentNode = ref('')

// 表格列定义
const columns = [
  {prop: 'avatar', label: '人脸照片', width: 120},
  {prop: 'name', label: '教职工姓名', 'min-width': 120},
  {prop: 'studentId', label: '教工号', 'min-width': 120},
  {prop: 'gender', label: '性别', 'min-width': 80},
  {prop: 'grade', label: '所属部门', 'min-width': 120},
  {prop: 'examId', label: '职工类型', 'min-width': 120},
  {prop: 'type', label: '实名状态', 'min-width': 100},
  {prop: 'admissionDate', label: '关注状态', 'min-width': 120},
  {prop: 'realName', label: '入职日期', 'min-width': 100},
  {prop: 'realName', label: '联系电话', 'min-width': 120},
]

// 处理节点点击
const handleNodeClick = (data) => {
  currentNode.value = data.label
  studentData.value = generateRandomStudents(10)
}

// 增加子架构
const addStructure = (node) => {
  console.log(node.label)
}

// 删除子架构
const deleteStructure = () => {
  console.log('删除子架构')
  ElMessageBox.confirm(
      '确定要删除吗？ ',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
      })
}

// 重命名
const rename = () => {
  console.log('重命名')
}

// 编辑状态控制
const isEditor = ref(false)

// 学校信息数据模型
const schoolInfo = reactive({
  name: '台州第一中学',
  logo: '', // 学校logo地址
  basicInfo: {
    schoolType: 'gcy-2024-01',
    schoolNature: '公办',
    schoolLevel: '台州一中',
    foundingTime: '1924年3月',
    phone: '0576-88580000',
    email: '',
    schoolMotto: '勤学、求真',
    location: '城西街道',
    socialCode: 'gcy-2024-01',
    supervisorUnit: '台州市教育局',
    schoolCode: 'gcy-2024-01',
    foundDate: '台州市教育局',
    zipCode: 'gcy-2024-01',
    principal: '台州市教育局',
    studentCount: '600',
    detailAddress: '浙江省台州市椒江区教师路9号'
  },
  introduction: '这是一段学校简介内容...这是一段学校简介内容...这是一段学校简介内容...',
  introduction2: '这是一段学校简介内容...这是一段学校简介内容...这是一段学校简介内容...',
  introduction3: '这是一段学校简介内容...这是一段学校简介内容...这是一段学校简介内容...',

  semesters: [
    { name: '2022-2023学年第一学期', startDate: '2025-02-18', endDate: '2025-02-18' },
    { name: '2022-2023学年第二学期', startDate: '2025-02-18', endDate: '2025-02-18' }
  ]
})

// 临时存储编辑前的数据，用于取消操作
const tempSchoolInfo = ref(null)

// 开始编辑
const startEdit = () => {
  tempSchoolInfo.value = JSON.parse(JSON.stringify(schoolInfo))
  isEditor.value = true
}

// 保存编辑
const saveEdit = () => {
  // 这里应该添加保存到后端的逻辑
  ElMessage({
    type: 'success',
    message: '保存成功'
  })
  isEditor.value = false
}

// 取消编辑
const cancelEdit = () => {
  ElMessageBox.confirm('确定要取消编辑吗？未保存的内容将丢失', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 恢复数据
    Object.assign(schoolInfo, tempSchoolInfo.value)
    isEditor.value = false
  }).catch(() => {})
}

// 添加新学期（改为使用对象引用）
const addNewSemester = () => {
  schoolInfo.semesters.push({
    name: '',
    startDate: '',
    endDate: ''
  })
}

// 默认图片
const defaultImage = 'https://cn.bing.com/th?id=OHR.BaobabAvenue_ZH-CN5217451344_1920x1080.jpg'

// 校园宣传视频列表
const schoolVideos = reactive({
  total: 12,
  activeVideo: 0,
  list: [
    { id: 1, title: '教学楼一角', date: '04-12', cover: defaultImage },
    { id: 2, title: '教学楼一角', date: '04-12', cover: defaultImage },
    { id: 3, title: '教学楼一角', date: '04-12', cover: defaultImage },
    { id: 4, title: '教学楼一角', date: '04-12', cover: defaultImage }, {id: 4, title: '教学楼一角', date: '04-12', cover: defaultImage},
    {id: 4, title: '教学楼一角', date: '04-12', cover: defaultImage},
    {id: 4, title: '教学楼一角', date: '04-12', cover: defaultImage},
    { id: 5, title: '教学楼一角', date: '04-12', cover: defaultImage }
  ]
})

// 校园风采图片列表
const schoolPhotos = reactive({
  activeIndex: 0,
  list: [
    { id: 1, url: defaultImage, title: '校园风光' },
    { id: 2, url: defaultImage, title: '学术报告厅' },
    { id: 3, url: defaultImage, title: '校园走廊' },
    { id: 4, url: defaultImage, title: '教学楼' },
    { id: 5, url: defaultImage, title: '绿地草坪' },
    { id: 6, url: defaultImage, title: '校园林荫道' },
    { id: 7, url: defaultImage, title: '秋季校园' },
    { id: 8, url: defaultImage, title: '运动场' }
  ]
})

// 选择视频
const selectVideo = (index) => {
  schoolVideos.activeVideo = index
}

// 选择图片
const selectPhoto = (index) => {
  schoolPhotos.activeIndex = index
}
</script>

<template>
  <div class="dashboard-container">
    <!-- 主要内容区 -->
    <div class="cam-main-content">
      <!-- 左侧树形结构 -->
      <div class="tree-container sudtree">
        <el-tree
            :data="schoolData"

            default-expand-all
            node-key="id"
            @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <div style="display: flex;align-items: center;gap: 5px">
                <div class="svg-icon-wrapper">
                  <img src="@/assets/images/tree.svg" alt="操作图标" class="svg-icon"/>
                </div>
                <span>{{ node.label }}</span></div>
              <div>
                <el-popover :width="200" placement="top-start" stop-popper-mouse-event trigger="click">
                  <template #reference>
                    <el-icon style="width: 35px;text-align: center;">
                      <More style="left: -12px;position: relative;"/>
                    </el-icon>
                  </template>
                  <div class="popStr">
                    <div @click="rename(node)">重命名</div>
                    <div @click="addStructure(node)">增加子架构</div>
                    <div @click="deleteStructure(node)" style="color: red">删除此架构</div>
                  </div>
                </el-popover>


              </div>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="content-wrapper">
        <div style="padding: 15px;background-color: white">
          <el-button v-if="!isEditor" type="primary" @click="startEdit">
            <el-icon :size="20" >
              <Edit/>
            </el-icon> 编辑</el-button>
          <template v-else>
            <el-button type="primary" @click="saveEdit">保存</el-button>
            <el-button @click="cancelEdit">取消</el-button>
          </template>
        </div>
        <div class="" style="padding: 15px">
          <!-- 右侧内容 -->
          <div class="cam-content">
            <!-- 学校名称和logo -->
            <div class="school-header">
              <div class="school-logo">
                <img src="@/assets/img/dfdnv.png" alt="学校logo" v-if="!isEditor" />
                <el-upload
                  v-else
                  class="avatar-uploader"
                  action="/api/upload"
                  :show-file-list="false"
                >
                  <img v-if="schoolInfo.logo" :src="schoolInfo.logo" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </div>
              <div class="school-name">
                <span v-if="!isEditor">学校名称: {{ schoolInfo.name }}</span>
                <el-input v-else v-model="schoolInfo.name" placeholder="请输入学校名称"></el-input>
              </div>
            </div>

            <!-- 基本信息 -->
            <div class="info-section">
              <div class="section-header">
                <div class="title-bar"></div>
                <h2>基本信息</h2>
              </div>
              <div class="basic-info-table">
                <el-descriptions :column="2" border>
                  <template v-if="!isEditor">
                    <el-descriptions-item label="学校类型">{{ schoolInfo.basicInfo.schoolType }}</el-descriptions-item>
                    <el-descriptions-item label="社会信用代码">{{ schoolInfo.basicInfo.socialCode }}</el-descriptions-item>
                    <el-descriptions-item label="学校性质">{{ schoolInfo.basicInfo.schoolNature }}</el-descriptions-item>
                    <el-descriptions-item label="上级单位">{{ schoolInfo.basicInfo.supervisorUnit }}</el-descriptions-item>
                    <el-descriptions-item label="学校级别">{{ schoolInfo.basicInfo.schoolLevel }}</el-descriptions-item>
                    <el-descriptions-item label="学校代码">{{ schoolInfo.basicInfo.schoolCode }}</el-descriptions-item>
                    <el-descriptions-item label="建校时间">{{ schoolInfo.basicInfo.foundingTime }}</el-descriptions-item>
                    <el-descriptions-item label="校庆日">{{ schoolInfo.basicInfo.foundDate }}</el-descriptions-item>
                    <el-descriptions-item label="传真电话">{{ schoolInfo.basicInfo.phone }}</el-descriptions-item>
                    <el-descriptions-item label="邮政编码">{{ schoolInfo.basicInfo.zipCode }}</el-descriptions-item>
                    <el-descriptions-item label="电子信箱">{{ schoolInfo.basicInfo.email }}</el-descriptions-item>
                    <el-descriptions-item label="法人姓名">{{ schoolInfo.basicInfo.principal }}</el-descriptions-item>
                    <el-descriptions-item label="校训">{{ schoolInfo.basicInfo.schoolMotto }}</el-descriptions-item>
                    <el-descriptions-item label="占地面积(㎡)">{{ schoolInfo.basicInfo.studentCount }}</el-descriptions-item>
                    <el-descriptions-item label="所在街道">{{ schoolInfo.basicInfo.location }}</el-descriptions-item>
                    <el-descriptions-item label="详细地址">{{ schoolInfo.basicInfo.detailAddress }}</el-descriptions-item>
                  </template>
                  <template v-else>
                    <el-descriptions-item label="学校类型">
                      <el-input v-model="schoolInfo.basicInfo.schoolType"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="社会信用代码">
                      <el-input v-model="schoolInfo.basicInfo.socialCode"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="学校性质">
                      <el-input v-model="schoolInfo.basicInfo.schoolNature"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="上级单位">
                      <el-input v-model="schoolInfo.basicInfo.supervisorUnit"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="学校级别">
                      <el-input v-model="schoolInfo.basicInfo.schoolLevel"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="学校代码">
                      <el-input v-model="schoolInfo.basicInfo.schoolCode"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="建校时间">
                      <el-input v-model="schoolInfo.basicInfo.foundingTime"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="校庆日">
                      <el-input v-model="schoolInfo.basicInfo.foundDate"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="传真电话">
                      <el-input v-model="schoolInfo.basicInfo.phone"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="邮政编码">
                      <el-input v-model="schoolInfo.basicInfo.zipCode"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="电子信箱">
                      <el-input v-model="schoolInfo.basicInfo.email"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="法人姓名">
                      <el-input v-model="schoolInfo.basicInfo.principal"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="校训">
                      <el-input v-model="schoolInfo.basicInfo.schoolMotto"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="占地面积(㎡)">
                      <el-input v-model="schoolInfo.basicInfo.studentCount"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="所在街道">
                      <el-input v-model="schoolInfo.basicInfo.location"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="详细地址">
                      <el-input v-model="schoolInfo.basicInfo.detailAddress"></el-input>
                    </el-descriptions-item>
                  </template>
                </el-descriptions>
              </div>
            </div>

            <!-- 学校简介 -->
            <div class="info-section">
              <div class="section-header">
                <div class="title-bar"></div>
                <h2>学校简介</h2>
              </div>
              <div class="school-intro">
                <p v-if="!isEditor">{{ schoolInfo.introduction }}</p>
                <el-input v-else type="textarea" v-model="schoolInfo.introduction" :rows="5"></el-input>
              </div>
            </div>

            <!-- 历史学期 -->
            <div class="info-section">
              <div class="section-header">
                <div class="title-bar"></div>
                <h2>历史学期</h2>
              </div>
              <div class="semester-history">
                <el-table :data="schoolInfo.semesters" border style="width: 100%" table-layout="auto">
                  <el-table-column prop="name" label="学期名称">
                    <template #default="scope" v-if="isEditor">
                      <el-input v-model="scope.row.name" placeholder="请输入学期名称"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="startDate" label="开始时间">
                    <template #default="scope" v-if="isEditor">
                      <el-date-picker v-model="scope.row.startDate" type="date" placeholder="选择开始日期" style="width: 100%"></el-date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column prop="endDate" label="结束时间">
                    <template #default="scope" v-if="isEditor">
                      <el-date-picker v-model="scope.row.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="isEditor" label="操作">
                    <template #default="scope">
                      <el-button size="small" @click="schoolInfo.semesters.splice(scope.$index, 1)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="isEditor" style="margin-top: 10px;">
                  <el-button type="primary" @click="addNewSemester">
                    添加学期
                  </el-button>
                </div>
              </div>
            </div>


            <!-- 办学成果 -->
            <div class="info-section">
              <div class="section-header">
                <div class="title-bar"></div>
                <h2>办学成果</h2>
              </div>
              <div class="school-intro">
                <p v-if="!isEditor">{{ schoolInfo.introduction2 }}</p>
                <el-input v-else type="textarea" v-model="schoolInfo.introduction2" :rows="5"></el-input>
              </div>
            </div>


            <!-- 学校荣誉 -->
            <div class="info-section">
              <div class="section-header">
                <div class="title-bar"></div>
                <h2>学校荣誉</h2>
              </div>
              <div class="school-intro">
                <p v-if="!isEditor">{{ schoolInfo.introduction3 }}</p>
                <el-input v-else type="textarea" v-model="schoolInfo.introduction3" :rows="5"></el-input>
              </div>
            </div>



            <!-- 学校荣誉 -->
            <div class="info-section">
              <div class="section-header">
                <div class="title-bar"></div>
                <h2>校园宣传</h2>
              </div>
              <div class="school-promotion">
                <div class="video-container">
                  <div class="main-video">
                    <img :src="schoolVideos.list[schoolVideos.activeVideo]?.cover || defaultImage" alt="视频封面" />
                    <div class="play-icon">
                      <el-icon><VideoPlay /></el-icon>
                    </div>
                  </div>
                  <div class="video-list">
                    <div class="video-list-header">所有视频({{ schoolVideos.total }})</div>
                    <div class="video-items">
                      <div 
                        v-for="(video, index) in schoolVideos.list" 
                        :key="video.id" 
                        class="video-item"
                        :class="{ 'active': index === schoolVideos.activeVideo }"
                        @click="selectVideo(index)"
                      >
                        <div class="video-index">{{ (index + 1).toString().padStart(2, '0') }}</div>
                        <div class="video-thumb">
                          <img :src="video.cover" :alt="video.title" />
                        </div>
                        <div class="video-info">
                          <div class="video-title">{{ video.title }}</div>
                          <div class="video-date">{{ video.date }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>


            <!-- 学校荣誉 -->
            <div class="info-section">
              <div class="section-header">
                <div class="title-bar"></div>
                <h2>校园风采</h2>
              </div>
              <div class="school-gallery">
                <div class="gallery-main">
                  <img :src="schoolPhotos.list[schoolPhotos.activeIndex]?.url || defaultImage" alt="校园风采" />
                </div>
                <div class="gallery-thumbs">
                  <div 
                    v-for="(photo, index) in schoolPhotos.list" 
                    :key="photo.id" 
                    class="thumb-item"
                    :class="{ 'active': index === schoolPhotos.activeIndex }"
                    @click="selectPhoto(index)"
                  >
                    <img :src="photo.url" :alt="photo.title" />
                  </div>
                </div>
              </div>
            </div>



          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.cam-main-content {
  width: 100%;
  display: flex;
  min-height: 100%; /* 继承父容器高度 */
  .content-wrapper {
    border-left: #C9D8FF solid 2px;
    width: 100%;
  }
}

.cam-content {
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 10px;
  border: #C9D8FF solid 1px;
  padding: 20px;
}

.school-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .school-logo {
    width: 80px;
    height: 80px;
    margin-right: 20px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .avatar-uploader {
      width: 100%;
      height: 100%;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .school-name {
    font-size: 18px;
    font-weight: bold;
  }
}

.info-section {
  margin-bottom: 30px;

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .title-bar {
      width: 4px;
      height: 20px;
      background-color: #3680ff;
      margin-right: 10px;
      border-radius: 10px;
    }

    h2 {
      font-size: 16px;
      margin: 0;
      color: #333;
    }
  }
}

.school-intro {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
}

// 校园宣传样式
.school-promotion {
  .video-container {
    display: flex;
    gap: 20px;
    height: 380px;
    
    .main-video {
      flex: 1;
      position: relative;
      background-color: #000;
      border-radius: 8px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        
        .el-icon {
          font-size: 28px;
          color: #3680ff;
        }
      }
    }
    
    .video-list {
      width: 280px;
      background-color: #12182A;
      color: white;
      border-radius: 8px;
      overflow: hidden;

       ::-webkit-scrollbar {
        width: 1px;
        border-radius: 10px;
        background-color: white !important;
      }

       ::-webkit-scrollbar-thumb {
        width: 1px;
        border-radius: 10px;
        background-color: #C8C8C8;
      }
      .video-list-header {
        padding: 15px;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      
      .video-items {
        height: calc(100% - 50px);
        overflow-y: auto;
      }
      
      .video-item {
        display: flex;
        padding: 10px 15px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        
        &:hover {
          background-color: rgba(255, 255, 255, 0.05);
        }
        
        &.active {
          background-color: rgba(54, 128, 255, 0.3);
        }
        
        .video-index {
          width: 30px;
          display: flex;
          align-items: center;
          color: rgba(255, 255, 255, 0.7);
        }
        
        .video-thumb {
          width: 60px;
          height: 45px;
          margin-right: 10px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 3px;
          }
        }
        
        .video-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          
          .video-title {
            font-size: 14px;
            margin-bottom: 5px;
          }
          
          .video-date {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }
  }
}

// 校园风采样式
.school-gallery {
  .gallery-main {
    width: 100%;
    height: 360px;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 8px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .gallery-thumbs {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
    
    .thumb-item {
      flex: 0 0 auto;
      width: 120px;
      height: 80px;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      
      &.active {
        border-color: #3680ff;
      }
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
